<template>
  <div class="category-section">
    <el-carousel
      ref="carouselRef"
      :loop="false"
      :autoplay="false"
      arrow="always"
      indicator-position="none"
    >
      <el-carousel-item v-for="(page, pageIndex) in categoryPages" :key="pageIndex">
        <div class="category-grid">
          <div
            v-for="(category, index) in page"
            :key="index"
            class="category-item"
            @click="handleClick(category)"
          >
            <div>
              <div class="category-name">{{ category.categoryName || category.assetName }}</div>
              <div class="category-name !text-12px">{{ getTypeName(category.categoryId) }}</div>
            </div>
            <div class="flex items-center">
              <el-divider class="!h-40px !border-l-#fff" direction="vertical" />
            </div>
            <div class="category-count">{{ category.count || category.assetQuantity }}</div>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <!-- <div class="carousel-indicators" v-if="totalPages > 1">
      <span
        v-for="i in totalPages"
        :key="i"
        :class="{ active: currentPage === i - 1 }"
        @click="switchPage(i - 1)"
      ></span>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const props = defineProps<{
  categoryData: any[]
  typeList?: any[]
}>()

const emit = defineEmits(['item-click'])
const carouselRef = ref()
const currentPage = ref(0)

// 计算分类页数
const categoryPages: any = computed(() => {
  const pages: any = []
  for (let i = 0; i < props.categoryData.length; i += 7) {
    pages.push(props.categoryData.slice(i, i + 7))
  }
  console.log(pages, '---pages')

  return pages
})

const totalPages = computed(() => categoryPages.value.length)

const getTypeName = (categoryId: number) => {
  const findItem = props.typeList?.find((item) => item.id === categoryId)
  return findItem?.name
}
// 切换轮播页
const switchPage = (index: number) => {
  currentPage.value = index
  carouselRef.value?.setActiveItem(index)
}
const handleClick = (category) => {
  emit('item-click', category)
}
// 监听轮播变化
watch(
  () => currentPage.value,
  (newVal) => {
    carouselRef.value?.setActiveItem(newVal)
  }
)
</script>

<style scoped lang="scss">
.category-section {
  border-radius: 8px;

  :deep() {
    .el-carousel__container {
      height: 114px !important;
    }
  }
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 15px;
}

.category-item {
  position: relative;
  display: flex;
  height: 114px;
  overflow: hidden;
  font-weight: bold;
  color: white;
  cursor: pointer;
  border-radius: 10px;
  justify-content: center;
  align-items: center;

  &:nth-child(7n + 1) {
    background: linear-gradient(180deg, #ffbaba 0%, #f99 100%);
  }

  &:nth-child(7n + 2) {
    background: linear-gradient(180deg, #ffde7a 0%, #ffcc80 100%);
  }

  &:nth-child(7n + 3) {
    background: linear-gradient(180deg, #9cdcff 0%, #78d0ff 100%);
  }

  &:nth-child(7n + 4) {
    background: linear-gradient(180deg, #95f59d 0%, #7ce683 100%);
  }

  &:nth-child(7n + 5) {
    background: linear-gradient(180deg, #c7c9fc 0%, #aaaef0 100%);
  }

  &:nth-child(7n + 6) {
    background: linear-gradient(180deg, #ffbde6 0%, #ff99d6 100%);
  }

  &:nth-child(7n + 7) {
    background: linear-gradient(180deg, #fbc7fc 0%, #e0a9eb 100%);
  }
}

.category-count {
  margin-bottom: 5px;
  font-size: 36px;
}

.category-name {
  font-size: 16px;
  text-align: center;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 8px;
}

.carousel-indicators span {
  width: 10px;
  height: 10px;
  cursor: pointer;
  background: #ddd;
  border-radius: 50%;
  transition: all 0.3s;
}

.carousel-indicators span.active {
  background: #409eff;
  transform: scale(1.2);
}
</style>
